<template>
  <ul class="orderitem">
    <!-- <template v-for="(item, index) in order.items" :key="index">
	 <OrderItem :goodsid="item.goodsid" :count="item.goodsCount"/>
	 </template> -->

    <slot/>
      <!-- <li v-show="!order.paid">
	   <button @click="togglePay"> 确认支付 </button>
	   <button @click="toggleDelete">取消订单</button>
	   </li>

	   <li v-show="order.paid">
	   <button disabled> 已支付 </button>
	   </li> -->
    <slot name="footer"/>
  </ul>

</template>

<script lang="ts" setup>
 import { currentUser, deleteOrder, findMatchOrder, updateOrder } from '@/service';
 import { inject, onMounted, PropType, ref } from 'vue';
 import OrderItem from './OrderItem.vue';

 // const props = defineProps({
 //   order: {type: Object as PropType<Order>, required: true}
 // })

 const reload = inject('reload') as () => void;
 async function togglePay() {
   alert('支付成功')
   await updateOrder({
     id: props.order.id!,
     userid: props.order.userid,
     price: props.order.price,
     paid: true,
     items: props.order.items
   })

   reload()
 }

 async function toggleDelete() {
   await deleteOrder(props.order.id!)
   reload()
 }
</script>

<style lang="scss" scoped>
 ul {
   list-style: none;
 }
</style>